<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="text" class="username">
        <p class="message">请输入6~16位用户名</p>
        <br>
        <input type="text" class="email">
        <p class="message">请输入邮箱</p>
        <br>
        <input type="text" class="num">
        <p class="message">请输入0~255之间的数字</p>
    </div>
    <script>

        /* 
          // 验证用户名  
        // 只能包含字母数字下划线 不能以数字开头 
        // 6~16位

        // var reg = /^[a-zA-Z_]\w{5,15}$/

        // 邮箱 
        // 1234@qq.com
        // gaohj@163.com
        // mengzhiyuan.com@qfedu.com
        // tianyanyu-888@gov.com.cn 
        // @左边 至少一位   . _ 字母 数字 - 
        // @右边  .左边 至少1位  . _ 字母 数字 - 
        // .右边  最少2位 最多6位  中文 字母 



        // ()@()\.()
        
        // 第一个([0-9a-zA-Z_\-\.]+)
        // 第二个([0-9a-zA-Z_\-\.]+)
        // 第三个([a-z\u4e00-\u9fa5]{2,7})
        // ([0-9a-zA-Z_\-\.]+)@([0-9a-zA-Z_\-\.]+)\.([a-z\u4e00-\u9fa5]{2,7})
        
        
        
        
        
        // 匹配0-255之间的数字  
        // 一位数字    0-9  \d 
        // 两位数字    09-99 \d{2}
        // 三位数字    100-255 
        //     第一位是1   1\d{2}
        //     第一位是2   200~255 

                第二位0~4 第三位 0~9   2[0-4]\d
                第二位是 5 第三位0~5   25[0-5]
                          

        var reg = /^(\d|\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/;
        var reg = /^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/;
        var reg = /^(1?\d{1,2}|2[0-4]\d|25[0-5])$/;


        0~666 
        // 1 位   \d
        // 2 位 \d{2}
        // 3 位
            // 第一位1  \d{2}
            // 第一位2  \d{2}
            // 第一位3  \d{2}
            // 第一位4  \d{2}
            // 第一位5  \d{2}


            //第一位是6[0-5]\d
            //第一位是66[0-6]

            // /^(\d|\d{2}|[1-5]\d{2})|6[0-5]\d|66[0-6]$/
            // /^(\d{1,2}|[1-5]\d{2})|6[0-5]\d|66[0-6]$/
            // /^([1-5]?\d{1,2})|6[0-5]\d|66[0-6]$/

           


        
        
        */
        // 获取元素 
        var inp = document.querySelectorAll('input');
        var p =  document.querySelectorAll('p');
        var reg = /^[a-zA-Z_]\w{5,15}$/;
        // 失去焦点后验证用户名
        inp[0].onblur = function(){
            if(!(reg.test(this.value))){
                p[0].className = 'message wrong';
                p[0].innerText = '用户名输入有误请重新输入'
            }
            else{
                p[0].className = 'message right';
                p[0].innerText = '用户名输入正确'
            }
        }

        inp[1].onblur = function(){
            var reg2 = /^([0-9a-zA-Z_\-\.]+)@([0-9a-zA-Z_\-\.]+)\.([a-z\u4e00-\u9fa5]{2,7})$/;
            if(!reg2.test(this.value)){
                p[1].className = 'message wrong';
                p[1].innerText = '您输入的邮箱错误'
            }
            else{
                p[1].className = 'message right';
                p[1].innerText = '您输入邮箱正确'
            }
        }


        inp[2].onblur = function(){
            var reg3 = /^(\d|\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/;
            if(!reg3.test(this.value)){
                p[2].className = 'message wrong';
                p[2].innerText = '您输入的数字有误'
            }
            else{
                p[2].className = 'message right';
                p[2].innerText = '您输入数字正确'
            }
        }

        var reg =  /^([1-5]?\d{1,2}|6[0-5]\d|66[0-6])$/;

        for(var i=0;i<700;i++){
            console.log(i,reg.test(i));
        }
    </script>
</body>

</html>